<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import geoJsonApi from "../assets/mapJson/chaina.json"

const mapViewRef = ref(null)
let myChart: echarts.ECharts | null = null


// 初始化地图
const initMap = () => {
  if (!mapViewRef.value) return
  
  // 初始化 ECharts 实例
  myChart = echarts.init(mapViewRef.value)
  const mapData = [
    { name: '北京市', value: Math.round(Math.random() * 500) },
    { name: '天津市', value: Math.round(Math.random() * 500) },
    { name: '上海市', value: Math.round(Math.random() * 500) },
    { name: '重庆市', value: Math.round(Math.random() * 500) },
    { name: '河北省', value: Math.round(Math.random() * 500) },
    { name: '河南省', value: Math.round(Math.random() * 500) },
    { name: '云南省', value: Math.round(Math.random() * 500) },
    { name: '辽宁省', value: Math.round(Math.random() * 500) },
    { name: '黑龙江省', value: Math.round(Math.random() * 500) },
    { name: '湖南省', value: Math.round(Math.random() * 500) },
    { name: '安徽省', value: Math.round(Math.random() * 500) },
    { name: '山东省', value: Math.round(Math.random() * 500) },
    { name: '新疆维吾尔自治区', value: Math.round(Math.random() * 500) },
    { name: '江苏省', value: Math.round(Math.random() * 500) },
    { name: '浙江省', value: Math.round(Math.random() * 500) },
    { name: '江西省', value: Math.round(Math.random() * 500) },
    { name: '湖北省', value: Math.round(Math.random() * 500) },
    { name: '广西壮族自治区', value: Math.round(Math.random() * 500) },
    { name: '甘肃省', value: Math.round(Math.random() * 500) },
    { name: '山西省', value: Math.round(Math.random() * 500) },
    { name: '内蒙古自治区', value: Math.round(Math.random() * 500) },
    { name: '陕西省', value: Math.round(Math.random() * 500) },
    { name: '吉林省', value: Math.round(Math.random() * 500) },
    { name: '福建省', value: Math.round(Math.random() * 500) },
    { name: '贵州省', value: Math.round(Math.random() * 500) },
    { name: '广东省', value: Math.round(Math.random() * 500) },
    { name: '青海省', value: Math.round(Math.random() * 500) },
    { name: '西藏自治区', value: Math.round(Math.random() * 500) },
    { name: '四川省', value: Math.round(Math.random() * 500) },
    { name: '宁夏省', value: Math.round(Math.random() * 500) },
    { name: '海南省', value: Math.round(Math.random() * 500) },
    { name: '台湾省', value: Math.round(Math.random() * 500) },
    { name: '香港特别行政区', value: Math.round(Math.random() * 500) },
    { name: '澳门特别行政区', value: Math.round(Math.random() * 500) },
  ];

  // $.get(geoJsonApi, function(getJson) {
  //    console.log('getJson',getJson)
  echarts.registerMap('china', geoJsonApi);
  let option = {
    //数据分段
    visualMap: {
      show: false,
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
        color: ['#dcecfc', '#006edd'],
        symbolSize: [30, 100],
      },
    },
    // 悬浮窗
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,0.8)', //设置背景图片 rgba格式
      color: '#fff',
      borderWidth: '1', //边框宽度设置1
      borderColor: 'gray', //设置边框颜色
      textStyle: {
        color: '#fff', //设置文字颜色
      },
      extraCssText: 'width:120px;height:40px', // 设置提示框宽高等css样式
      formatter: function (params) {
        return `${params.name}: <br /> ${params.value || 0}个`;
      },
    },
    geo: {
      // 这个是重点 —— 这里设置为地图的阴影
      map: 'china', // 表示中国地图
      roam: false, // 禁止拖拽
      label: {
        // 标志信息
        show: false, // 是否显示对应地名
      },
      silent: true, // 禁止hover效果
      zoom: 1.4, // 地图比例
      aspectScale: 0.9, // 比例
      center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
      itemStyle: {
        areaColor: '#1c84f4', //地图阴影的颜色
        // areaColor: {
        //   image: img, // 背景图
        //   repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        // },
        borderColor: '#1c84f4', // 省份边框颜色
        borderWidth: 0.2, // 省份边框宽度
        shadowColor: '#fff', // 省份边框阴影rgba(100,255,238,0.5)
        shadowBlur: 5, // 省份边框聚焦
      },
      emphasis: {
        show: false,
      },
      //地图的阴影不显示南沙诸岛
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            // 隐藏地图
            normal: {
              opacity: 0, // 为 0 时不绘制该图形
            },
            emphasis: {
              opacity: 0,
            },
          },
          label: {
            show: false, // 隐藏文字
          },
        },
      ],
    },
    //配置属性
    series: [
      {
        type: 'map',
        map: 'china',
        zoom: 1.4,
        aspectScale: 0.9, // 比例
        zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
        emphasis: {
          // 鼠标hover是否显示内容，可自己调节
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            show: true,
            color: '#00114F', // 高亮文字颜色
            borderColor: '#f43c24', // 高亮边框颜色
            areaColor: '#f47c84', //高亮区域颜色
          },
        },
        label: {
          // 地图标注
          show: true, // 是否显示对应地名
          //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
          color: '#000',
        },
        itemStyle: {
          borderColor: '#fff', // 省份边框颜色
          borderWidth: 1.5, // 省份边框宽度
          shadowColor: '#fff', // 省份边框阴影rgba(100,255,238,0.5)
          shadowBlur: 5, // 省份边框聚焦
          areaColor: '#dcecfc',
        },
        center: [105.194115019531, 35.582111640625], // 设置地图中心
        data: mapData,
        select: {
          itemStyle: {
            areaColor: '#1890ff' // 选中后的颜色
          }
        },
        selectedMode: 'single', // 可以是 'single' 或 'multiple'
      },
    ],
  };
  if (myChart) {
    myChart.setOption(option)

    // 添加点击事件监听
    myChart.on('click', handleMapClick)
  }





  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
}

const handleResize = () => {
  myChart?.resize()
}

// 添加点击事件处理函数
const handleMapClick = (params: any) => {
  if (params.name) {
    console.log('点击的省份:', params.name)
    console.log('该省份的数据:', params.data)
    // 这里可以添加你的处理逻辑
    // 比如：
    // - 显示详细信息
    // - 跳转到详情页
    // - 打开弹窗等
  }
}

// 组件卸载时清理
onUnmounted(() => {
  if (myChart) {
    myChart.off('click', handleMapClick) // 移除点击事件监听
    myChart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="h-max">
    <div ref="mapViewRef" class="map-container"></div>
  </div>
</template>

<style scoped lang="scss">
.h-max {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  background-color: #2d2d2d;
  width: 1750px;
  height: 92%;

  .map-container {
    width: 100%;
    height: 100%;
  }
}
</style>
